/*
 * @Date: 2022-04-21 20:48:14
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-22 13:10:08
 * @FilePath: \weibovue\src\hooks\useClickOutSide.ts
 * @Description: 鼠标点击判断
 */
import { onMounted, onUnmounted, ref, Ref } from "vue";

const useClickOutSide = (domRef: Ref<null | HTMLElement>) => {
  const isClickOutSide = ref(false);
  const handler = (e: MouseEvent) => {
    if (domRef.value) {
      if (
        domRef.value.contains(
          (e.target as HTMLElement) || document.querySelector(".el-popper"),
        )
      ) {
        isClickOutSide.value = false;
      } else if (
        document.querySelector(".el-popper")?.contains(e.target as HTMLElement)
      ) {
        isClickOutSide.value = false;
      } else {
        isClickOutSide.value = true;
      }
    }
  };
  onMounted(() => {
    document.addEventListener("click", handler);
  });
  onUnmounted(() => {
    document.removeEventListener("click", handler);
  });
  return { isClickOutSide };
};

export default useClickOutSide;
